<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="btn">点我</button>
<script type="text/javascript">
  
  /*
  * 关于jsonp解决跨域
  *     1.原理：利用了script标签发请求不受同源策略的限制。所以不会产生跨域问题
  *     2.套路：动态构建script节点，利用节点的src属性，发出get请求，从而绕开ajax引擎
  *     3.弊端：(1).只能解决get请求跨域的问题。(2).后端工程师必须配合前端
  *     4.备注：有这样一种感觉：前端定义函数，后端“调用”。后端返回的数据，前端以js格式解析，并且运行。
  * */

  let btn = document.getElementById('btn')
  btn.onclick = function () {
    //1.提前定义好一个等待被调用的函数
    window.peiqi = function(result) {
      console.log(result)
    }
    //2.创建一个script节点
    const scriptNode = document.createElement('script')
    //3.为节点指定src地址，同时指定好回调函数的名字
    scriptNode.src = 'http://localhost:3000/test?callback=peiqi'
    //4.将节点插入页面
    document.body.appendChild(scriptNode)
  }
  
</script>

</body>
</html>